<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" src="axios.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .parent {
            position: relative;
            /* 可以根据需要调整高度 */
            background-color: #5a4d4d;
            border: 2px solid #101c29;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(145, 136, 136, 0.1);
            text-align: center;
            height: 800px;
        }

        .collect {
            display: none;
            position: fixed;
            /* 固定定位 */
            top: 50px;
            /* 距离顶部50px */
            left: 50%;
            /* 居中 */
            transform: translateX(-50%);
            /* 向左移动自身的50% */
            width: 80%;
            /* 占据大半个屏幕 */
            max-height: 80%;
            /* 最大高度 */
            overflow-y: auto;
            /* 如果内容超出高度，可以滚动 */
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            /* 确保在顶部 */
        }

        .collect div {
            margin-bottom: 20px;
        }

        .collect span {
            color: #d4441b;
            font-weight: bold;
            display: block;
            margin-bottom: 10px;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
        }

        div div .title {
            font-size: 45px;
        }

        .downOrderPic {
            position: absolute;
            /* 设置子元素为绝对定位 */
            top: 50px;
            /* 距离父元素顶部0 */
            left: 20px;
            /* 距离父元素左侧20px */
            width: calc(100% / 4);
            padding: 20px;
            /* 宽度为父元素的1/3 */
            background-color: #dce0dc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .downListPic {
            position: absolute;
            top: 50px;
            left: calc(100% / 3);
            width: calc(100% / 4);
            padding: 20px;
            background-color: #dce0dc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .updateData {
            position: absolute;
            left: calc(100% / 3 * 2);
            width: calc(100% / 4);
            padding: 20px;
            top: 50px;
            background-color: #dce0dc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .overlay {
            position: fixed;
            /* 使用固定定位覆盖整个屏幕 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            /* 半透明黑色 */
            display: none;
            /* 默认隐藏 */
            justify-content: center;
            align-items: center;
            z-index: 10;
            /* 确保遮罩在内容上方 */
        }

        #test {
            background-color: #2593db;
            color: #933a3a;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.3s, background-color 0.1s;
            /* 添加过渡效果 */
        }

        #test:active {
            transform: scale(0.75);
            /* 点击时缩小 */
            background-color: #61ba02;
            /* 点击时颜色变化 */
        }

        .buttons button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            transition: transform 0.3s, background-color 0.1s;
        }

        .buttons button:active {
            transform: scale(0.75);
            /* 点击时缩小 */
            background-color: #61ba02;
            /* 点击时颜色变化 */
        }

        .downOrderPic .image {
            background-color: #3498db;
            color: white;
        }

        .downOrderPic .excel {
            background-color: #00ac90;
            color: white;
        }

        .downOrderPic .anticipated {
            background-color: #adad7b;
            color: white;
        }

        .downListPic button {
            background-color: #d4441b;
            color: white;
        }

        .updateData button {
            background-color: #646ae3;
            color: white;
        }

        /*    ----*/

        #overlay2 {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        #popup {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 400px; /* 设置固定宽度 */
            max-width: 100%; /* 确保宽度不超过屏幕宽度 */
            overflow: auto; /* 添加滚动条以便内容超出时可以滚动 */
        }

        .radio-group {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .radio-group label {
            margin-right: 10px;
        }

        .hidden {
            display: none;
        }

        #fileOptions {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        #fileInput {
            display: none;
            margin-left: 10px;
        }

        /* 拖动相关样式 */
        #popup-header {
            cursor: move;
            background-color: #f0f0f0;
            padding: 10px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            margin-bottom: 10px;
        }

        /* 结果类型样式 */
        #resultTypeOptions {
            margin-bottom: 10px;
        }

        /* 按钮样式 */
        #uploadButton, #closeButton {
            background-color: #5cb85c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }

        #uploadButton:hover, #closeButton:hover {
            background-color: #4cae4c;
        }

        /* 进度条样式 */
        #progressBar {
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 4px;
            margin-top: 10px;
            overflow: hidden;
        }

        #progressBar div {
            height: 100%;
            background-color: #4cae4c;
            width: 0%;
        }
    </style>
</head>
<!-- 按钮-->
<body>
<div class="parent">
    <button id="test">测试
    </button>
    <br> <br>
    <div class="downOrderPic buttons">
        <button id="downloadOrder" class="image">
            下载最新订单图片使用模板1
        </button>
        <br> <br>
        <button class="image">
            下载最新订单图片使用模板2
        </button>
        <br> <br>
        <button class="excel">
            下载最新订单excel模板1
        </button>
        <br> <br>
        <button class="excel">
            下载最新订单excel模板2
        </button>
        <br> <br>
        <button id="downloadAnticipatedOrderPic" class="anticipated">
            下载预计订单图片
        </button>
        <br> <br>
        <button id="downloadAnticipatedOrderExcel" class="anticipated">
            下载预计订单excel表格
        </button>
        <br> <br>
        <button id="openPopup">选择下载接口</button>
    </div>

    <div class="downListPic buttons">
        <button id="downloadListTemplate1">
            下载卷烟列表使用模板1(类型不区分)
        </button>
        <br> <br>
        <button id="downloadListTemplate2">
            下载卷烟列表使用模板2(显示批发价)
        </button>
        <br> <br>
        <button id="downloadListTemplate2_1">
            下载卷烟列表使用模板2_1(不显示批发价)
        </button>
    </div>

    <div class="updateData buttons">
        <button id="checkDiffInfo">
            查看差异
        </button>
        <br><br>
        <!--下载未下载的图片 更新其他数据 -->
        <button id="downDeficiencyPic">
            下载未下载的图片
        </button>
        <br><br>
        <button id="updateOtherData">
            <!--            barCode 和 isCigar -->
            更新其他数据(barCode 和 isCigar)
        </button>
        <br><br>
        <button id="queryLatestBatchChangedSmokes">
            <!--            应该查询所有批次，然后再开放一个接口查询这个批次的改变，！！！  -->
            查询最新批次变更的烟
        </button>
    </div>

    <br> <br>
    <div class="collect" id="collectDiv">
        <div class="close-btn" id="closeBtn">X</div>
        <span>今日烟的差异</span>
        <div class="add">
            <span class="title">新增的产品</span>
            <div id="addList"></div>
        </div>
        <div class="delete">
            <span class="title">下架的产品</span>
            <div id="deleteList"></div>
        </div>
        <div class="update">
            <span class="title">更新的产品</span>
            <div id="updateList"></div>
        </div>
        <hr>
        <h2>汇总</h2>
        <span>
                <div class="addStr"></div>
                <div class="deleteStr"></div>
                <div class="updateStr"></div>
            </span>
        <div id="show">
            <div>提示:</div>
            <span id="tips"></span>
        </div>
        <button id="updateDatabase">经过确认。进行更新</button>
    </div>

</div>
<div class="overlay" id="overlay">
</div>
<div id="overlay2">
    <div id="popup">
        <div id="popup-header">下载接口</div>
        <div class="radio-group">
            <input type="radio" id="radioOption1" name="resultType" value="order" checked>
            <label for="radioOption1">最新订单</label>
            <div id="templateOptions1" class="hidden">
                <input type="radio" id="template1" name="template" value="template1" checked>
                <label for="template1">模板1</label>
                <input type="radio" id="template2" name="template" value="template2">
                <label for="template2">模板2</label>
            </div>
        </div>
        <div class="radio-group">
            <input type="radio" id="radioOption2" name="resultType" value="estimatedOrders">
            <label for="radioOption2">预计订单</label>
            <div id="templateOptions2" class="hidden">
                <input type="radio" id="template3" name="template" value="template1" checked>
                <label for="template3">模板1</label>
                <input type="radio" id="template4" name="template" value="template2">
                <label for="template4">模板2</label>
            </div>
        </div>
        <div class="radio-group">
            <input type="radio" id="radioOption3" name="resultType" value="allSmokeList">
            <label for="radioOption3">所有卷烟列表</label>
            <div id="templateOptions3" class="hidden">
                <input type="radio" id="template5" name="template" value="template1" checked>
                <label for="template5">模板1</label>
                <input type="radio" id="template6" name="template" value="template2">
                <label for="template6">模板2</label>
            </div>
        </div>
        <h3>是否选择文件</h3>
        <hr>
        <div id="fileOptions" class="hidden">
            <input type="radio" id="fileYes" name="fileChoice" value="yes" checked>
            <label for="fileYes">是</label>
            <input type="radio" id="fileNo" name="fileChoice" value="no">
            <label for="fileNo">否</label>
            <input type="file" id="fileInput" name="file" class="hidden">
        </div>

        <div id="resultTypeOptions">
            <h3>结果类型</h3>
            <div class="radio-group">
                <input type="radio" id="opImage" name="resultType1" value="image" checked>
                <label for="opImage">图片(jpg)</label>
            </div>
            <div class="radio-group">
                <input type="radio" id="opForm" name="resultType1" value="form">
                <label for="opForm">表格(xls)</label>
            </div>
        </div>

        <button id="uploadButton">开始下载</button>
        <button id="closeButton">关闭</button>
        <div id="progressBar">
            <div></div>
        </div>
    </div>
</div>

</body>

<script>
    var port = "8030"
    axios.defaults.baseURL = 'http://127.0.0.1:' + port;
    // 添加关闭按钮功能
    const closeBtn = document.getElementById('closeBtn');
    const collectDiv = document.getElementById('collectDiv');

    // 在页面加载完成后，为每个按钮绑定点击事件
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById("test").addEventListener('click', function () {
            test();
        });
        document.getElementById("downloadOrder").addEventListener('click', function () {
            downloadOrder('orderTemplate1');
        });
        document.getElementById("downloadAnticipatedOrderPic").addEventListener('click', function () {
            downloadAnticipatedOrder('anticipatedOrderPic');
        });
        document.getElementById("downloadAnticipatedOrderExcel").addEventListener('click', function () {
            downloadAnticipatedOrderExcel('anticipatedOrderExcel');
        });
        // 绑定第一个按钮并传递参数
        document.getElementById('downloadListTemplate1').addEventListener('click', function () {
            downloadList('listTemplate1');
        });

        // 绑定第二个按钮并传递参数
        document.getElementById('downloadListTemplate2').addEventListener('click', function () {
            downloadList('listTemplate2');
        });

        // 绑定第三个按钮并传递参数
        document.getElementById('downloadListTemplate2_1').addEventListener('click', function () {
            downloadList('listTemplate2_1');
        });

        //
        document.getElementById('checkDiffInfo').addEventListener('click', function () {
            checkDiffInfo();
        });
        //
        document.getElementById('updateDatabase').addEventListener('click', function () {
            updateDatabase();
        })
    });

    function test() {
        //GET 请求
        axios.get('/test/success', {
            // 对响应结果的处理
        }).then(value => {
            if (value.data === 'success') {
                alert('链接中')
            } else {
                alert("断开")
            }
        });
    }

    function downloadList(template) {
        //GET 请求
        axios.get('smoke/list/' + template, {
            responseType: 'arraybuffer' // 设置响应类型为arraybuffer
            // 对响应结果的处理
        }).then(value => {
            const blob = new Blob([value.data]);
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'list.jpg'; // 设置下载文件的文件名
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        });
    }

    function downloadOrder(type) {
        //GET 请求
        axios.get('smoke/downOrderPic/' + type, {
            // axios.get('smoke/downOrderPic/orderTemplate1', {
            responseType: 'arraybuffer' // 设置响应类型为arraybuffer
            // 对响应结果的处理
        }).then(value => {
            const blob = new Blob([value.data]);
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'order.jpg'; // 设置下载文件的文件名
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        });
    }

    function downloadAnticipatedOrder(type) {
        //GET 请求
        axios.get('smoke/downAnticipatedOrder/' + type, {
            responseType: 'arraybuffer' // 设置响应类型为arraybuffer
            // 对响应结果的处理
        }).then(value => {
            const blob = new Blob([value.data]);
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'anticipatedOrder.jpg'; // 设置下载文件的文件名
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        });
    }

    function downloadAnticipatedOrderExcel(type) {
        //GET 请求
        axios.get('smoke/downAnticipatedOrder/' + type, {
            responseType: 'arraybuffer' // 设置响应类型为arraybuffer
            // 对响应结果的处理
        }).then(value => {
            const blob = new Blob([value.data]);
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'anticipatedOrder.xls'; // 设置下载文件的文件名
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        });
    }

    var checkRes = {};

    function checkDiffInfo() {
        showOverlay();
        collectDiv.style.display = 'block';
        axios.post('smoke/isDataConsistency').then(value => {
            const collection = value.data.data;
            checkRes = collection;
            console.log(value.data.data)
            const addInfos = collection.addInfos;
            const deleteInfos = collection.deleteInfos;
            const updateInfos = collection.updateInfos;
            displayData(addInfos, 'addList');
            displayData(deleteInfos, 'deleteList');
            displayData(updateInfos, 'updateList');

            if (addInfos !== null || deleteInfos != null || updateInfos != null) {
                // 将每个集合中的ProductName提取出来并汇总
                const addProductNames = addInfos.map(info => info.product_name).filter(name => name !==
                    undefined);
                const addStrs = addProductNames.join(', ');
                const deleteProductNames = deleteInfos.map(info => info.productName).filter(name => name !==
                    undefined);
                const deleteStrs = deleteProductNames.join(', ')
                const updateProductNames = updateInfos.map(info => info.newInfo.product_name).filter(name =>
                    name !== undefined);
                const updateStrs = updateProductNames.join(', ')
                const addStr = "新增的数据为(" + addProductNames.length + ")：" + addStrs;
                const deleteStr = "下架的数据为(" + deleteProductNames.length + "): " + deleteStrs;
                const updateStr = "更新的数据为(" + updateProductNames.length + "): " + updateStrs;
                // 创建或更新显示内容的div元素
                const addDiv = document.querySelector('.addStr');
                const deleteDiv = document.querySelector('.deleteStr');
                const updateDiv = document.querySelector('.updateStr');
                if (addProductNames.length <= 0) {
                    addDiv.style.display = 'none';
                }
                if (deleteProductNames.length <= 0) {
                    deleteDiv.style.display = 'none';
                }
                if (updateProductNames.length <= 0) {
                    updateDiv.style.display = 'none';
                }
                addDiv.textContent = addStr;
                deleteDiv.textContent = deleteStr;
                updateDiv.textContent = updateStr;
            }

            if (collection.remarks.length > 0) {
                const showDiv = document.getElementById('show');
                showDiv.style.display = 'block';
                // 在页面上的span元素中显示结果
                // 创建一个有序列表元素
                const ul = document.createElement('ul');
                // 按顺序显示集合中的元素
                for (let i = 0; i < collection.remarks.length; i++) {
                    const productName = collection.remarks[i];
                    const li = document.createElement('li');
                    const span = document.createElement('span');
                    span.textContent = productName;
                    li.appendChild(span);
                    ul.appendChild(li);
                }
                // 将有序列表添加到页面上的span元素中
                const tips = document.getElementById('tips')
                tips.appendChild(ul);
            }
        })
    }

    function updateDatabase() {
        console.log(checkRes)
        axios.post('smoke/updateDate',
            // 请求体参数
            checkRes
        ).then(value => {
            console.log(value)
        })
    }

    function displayData(dataArray, listId) {
        const listElement = document.getElementById(listId);
        listElement.innerHTML = ''; // Clear previous content

        dataArray.forEach(item => {
            const itemElement = document.createElement('div');
            itemElement.textContent = JSON.stringify(item, null, 2);
            listElement.appendChild(itemElement);
        });
    }

    function showOverlay() {
        document.getElementById('overlay').style.display = 'flex';
    }

    function hideOverlay() {
        document.getElementById('overlay').style.display = 'none';
    }

    closeBtn.addEventListener('click', function () {
        hideOverlay();
        collectDiv.style.display = 'none';
    });
</script>
<script>
    document.getElementById('openPopup').addEventListener('click', function () {
        document.getElementById('overlay2').style.display = 'block';
        updateTemplateOptions();
        updateFileOptions();
    });

    document.getElementById('closeButton').addEventListener('click', function () {
        document.getElementById('overlay2').style.display = 'none';
    });

    document.querySelectorAll('input[name="resultType"]').forEach(function (radio) {
        radio.addEventListener('change', function () {
            updateTemplateOptions();
            updateFileOptions();
        });
    });

    document.querySelectorAll('input[name="fileChoice"]').forEach(function (radio) {
        radio.addEventListener('change', function () {
            updateFileInput();
        });
    });

    function updateTemplateOptions() {
        var templateOptions1 = document.getElementById('templateOptions1');
        var templateOptions2 = document.getElementById('templateOptions2');
        var templateOptions3 = document.getElementById('templateOptions3');

        if (document.getElementById('radioOption1').checked) {
            templateOptions1.style.display = 'flex';
            templateOptions2.style.display = 'none';
            templateOptions3.style.display = 'none';
        } else if (document.getElementById('radioOption2').checked) {
            templateOptions1.style.display = 'none';
            templateOptions2.style.display = 'flex';
            templateOptions3.style.display = 'none';
        } else if (document.getElementById('radioOption3').checked) {
            templateOptions1.style.display = 'none';
            templateOptions2.style.display = 'none';
            templateOptions3.style.display = 'flex';
        }
    }

    function updateFileOptions() {
        var fileOptions = document.getElementById('fileOptions');

        if (document.getElementById('radioOption1').checked || document.getElementById('radioOption2').checked) {
            fileOptions.style.display = 'flex';
        } else {
            fileOptions.style.display = 'none';
            document.getElementById('fileInput').style.display = 'none';
        }

        updateFileInput(); // 确保文件输入框的显示状态更新
    }

    function updateFileInput() {
        var fileInput = document.getElementById('fileInput');

        if ((document.getElementById('radioOption1').checked || document.getElementById('radioOption2').checked) && document.getElementById('fileYes').checked) {
            fileInput.style.display = 'block';
        } else {
            fileInput.style.display = 'none';
        }
    }
    // 添加下载接口功能
    document.getElementById('uploadButton').addEventListener('click', function () {
        // 创建 DownInterface 对象
        var comprehensiveDownload = {
            interfaceName: 'download', // 或者根据实际情况动态获取
            templateName: document.querySelector('input[name="template"]:checked').value,
            isSelectContent: document.querySelector('input[name="fileChoice"]:checked').value === 'yes' ? 'true' : 'false',
            content: null, // 文件内容将在文件选择后设置
            resType: document.querySelector('input[name="resultType1"]:checked').value,
            fileName: '' // 初始化文件名称
        };

        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        if (file && comprehensiveDownload.isSelectContent === 'true') {
            var reader = new FileReader();
            reader.onload = function (e) {
                comprehensiveDownload.content = e.target.result.split(',')[1]; // 获取 base64 编码的文件内容，去除前缀
                comprehensiveDownload.fileName = file.name; // 设置文件名称

                // 使用 axios 发送 POST 请求
                axios.post('/smoke/comprehensiveDownload', comprehensiveDownload)
                    .then(response => {
                        // 处理成功的响应
                        alert('Download initiated successfully: ' + response.data);
                    })
                    .catch(error => {
                        // 处理请求出错的情况
                        alert('Error in initiating download: ' + error.message);
                    });
            };
            reader.readAsDataURL(file);
        } else {
            // 如果没有选择文件或者选择了“否”，则发送请求
            // 在这种情况下，文件名称可能不需要，但如果你需要它，可以设置一个默认值或留空
            axios.post('/smoke/comprehensiveDownload', comprehensiveDownload)
                .then(response => {
                    // 处理成功的响应
                    alert('Download initiated successfully: ' + response.data);
                })
                .catch(error => {
                    // 处理请求出错的情况
                    alert('Error in initiating download: ' + error.message);
                });
        }
    });

    // 拖动功能
    var popup = document.getElementById('popup');
    var popupHeader = document.getElementById('popup-header');
    var isDragging = false;
    var offsetX, offsetY;

    popupHeader.addEventListener('mousedown', function (e) {
        isDragging = true;
        offsetX = e.clientX - popup.offsetLeft;
        offsetY = e.clientY - popup.offsetTop;
    });

    document.addEventListener('mousemove', function (e) {
        if (isDragging) {
            popup.style.left = (e.clientX - offsetX) + 'px';
            popup.style.top = (e.clientY - offsetY) + 'px';
        }
    });

    document.addEventListener('mouseup', function () {
        isDragging = false;
    });
</script>

</html>